<div *ngIf="rendered" class="widget stats-widget" ngClass.xs="double-height xs">
  <div class="card-container  front">
    <mat-card class="front" fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between stretch">
      <mat-card-content>
        <mat-toolbar-row >

          <!-- Mobile Only: Exit widget -->
          <button fxHide.gt-xs class="mat-card-title-text" mat-icon-button color="default" 
            ix-auto ix-auto-type="button" ix-auto-identifier="goBack">
            <mat-icon (click)="goBack()" class="back-arrow">chevron_left</mat-icon>
          </button><span fxHide.gt-xs>&nbsp;&nbsp;</span>

          <h3 class="mat-card-title-text"><div class="card-title-text">{{title | translate}}</div></h3>

            <div class="controls">
              <button mat-icon-button class="" (click)="router.navigate(['reportsdashboard/memory'])"
                ix-auto ix-auto-type="button" ix-auto-identifier="memoryReports">
                <mat-icon role="img"
                  matTooltip="{{'Memory Reports' | translate}}"
                  matTooltipPosition="above"
                  aria-label="Memory Reports">
                    insert_chart
                </mat-icon>
              </button>
            </div>

        </mat-toolbar-row>


        <div id="cpu-cores-wrapper" class="bar-chart-wrapper" fxLayout="row wrap" fxLayoutAlign="space-around center">
         
          <div class="spinner-wrapper"><mat-spinner [diameter]="40" *ngIf="!memData" style="margin: 0 auto;"></mat-spinner></div>
        
        <div class="primary-stat-wrapper" fxFlex.gt-xs="45" fxFlex.xs="100">
          <h1 class="memory-used">
            <span *ngIf="memData">
              <!--<span>{{memData.data[0][1]}}</span>-->
              <span>{{memData.max}}</span>
              <span class="memory-used-units">GiB</span>
            </span>
            </h1>
          <div class="memory-used-caption">
            <span *ngIf="memData">
              {{"total available" | translate}}
              <span *ngIf="ecc">(ECC)</span>
            </span>
          </div>
          <!-- Legend --> 
          <div *ngIf="screenType == 'Desktop'" id="cpu-load-cores-legend">
            <div *ngIf="memData; else noLegend" id="cpu-load-cores-legend-values">
  
              <!-- Desktop -->
              <div fxHide.xs *ngFor="let legendItem of memData.data; let i=index"  class="legend-item">
                <div class="legend-swatch" [style.background-color]="trustedSecurity(colorPattern[i])"></div><span class="label">{{legendItem[0]}}:</span> {{legendItem[1]}} GiB
              </div>
  
            </div>
          </div>
        </div>

        <!-- Chart --> 
        <div fxFlex.xs="100" fxFlex.gt-xs="55" id="memory-usage-chart" class="bar-chart">
          <canvas></canvas>
        </div>

        <!-- Mobile Legend --> 
          <div *ngIf="screenType == 'Mobile'" fxFlex="100" id="cpu-load-cores-legend" fxLayout="row wrap">
            <!-- Mobile -->
            <div fxFlex="100" fxHide.gt-xs class="list-subheader">  <span>{{"Legend" | translate}}</span></div>
            <mat-list *ngIf="memData; else noLegend" fxFlex="100" fxHide.gt-xs>
              <mat-list-item *ngFor="let listItem of memData.data; let i=index"  class="legend-item">
                <div class="legend-swatch" [style.background-color]="trustedSecurity(colorPattern[i])"></div>
                <span class="label">{{listItem[0]}}:</span><span class="value">&nbsp;&nbsp; {{listItem[1]}} GiB</span>
              </mat-list-item>
            </mat-list>
          </div>

        <ng-template #noLegend>
          <div id="cpu-load-cores-legend-values" fxFlex fxLayout="row" fxLayoutAlign="space-around center">
            <div fxFlex="100" class="legend-item chart-label">
              <span class="label"></span>
            </div>
          </div>
        </ng-template>

      </div> 

    </mat-card-content>
  </mat-card>

  </div>
</div>
